import { PureComponent } from "react";
import { Routes, Route,Link,NavLink, Navigate} from 'react-router-dom'
import Home from "./Home";
import About from './About'
import  '../style/style.css'
import NotFund from "./NotFund";
import Login from "./Login";
import Recommend from "./Recommend";
import RouteComponent from "./RouteComponent";
import Detail from "./Detail";
import User from "./User";

class App extends PureComponent
{
   
    constructor()
    {
        super();
        this.state = {
            isLogin:true
        }
    }

   
    render()
    {
         
        
        return (
            <div>
                <div className="header">
                    <Link to="/home" className="LinkButton">home</Link>
                    <Link to="/about">about</Link>
                    <NavLink to="/home">home</NavLink>
                    <NavLink to="/about">about</NavLink>
                    <Link to='/user?name="cq"&age=11'>user</Link>
                    <RouteComponent></RouteComponent>
                </div>
                  <Routes>
                    <Route path="/home" element={this.state.isLogin ? <Home></Home> : <Navigate to='/login' replace />}>
                     <Route path="/home/recommend" element={ <Recommend></Recommend>}></Route>
                    </Route>
                    <Route path="/about" element={<About></About>}></Route>
                    <Route path="/login" element={<Login></Login>}></Route>
                    <Route path='/detail/:id' element={<Detail></Detail>} ></Route>
                    <Route path="/user" element={<User></User>}></Route>
                    <Route path="*" element={<NotFund></NotFund>}></Route>
                </Routes>
            </div>
        )
    }
}
export default App;